{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <title>日历</title>#}
{#    <style>#}
{#        html{#}
{#            background: #000;#}
{#            color: #666;#}
{#            font-size: 12px;#}
{#            overflow:hidden;#}
{#        }#}
{#        *{#}
{#            margin: 0;#}
{#            padding: 0;#}
{#        }#}
{#        span{#}
{#            display: block;#}
{#            float: left;#}
{#        }#}
{#        .on{#}
{#            color: #fff;#}
{#        }#}
{#        .wrapper{#}
{#            width: 200px;#}
{#            height: 200px;#}
{#            position: absolute;#}
{#            left:50%;#}
{#            top:50%;#}
{#            margin-top: -100px;#}
{#            margin-left: -100px;#}
{#        }#}
{#        .wrapper .timebox{#}
{#            position: absolute;#}
{#            width: 200px;#}
{#            height: 200px;#}
{#            top: 0;#}
{#            left:0;#}
{#            border-radius: 100%;#}
{#            transition: all 0.5s;#}
{#        }#}
{#        .timebox span{#}
{#            transition: all 0.5s;#}
{#            float: left;#}
{#        }#}
{#        .wrapper  .timebox span{#}
{#            position: absolute;#}
{#            left:50%;#}
{#            top:50%;#}
{#            width: 40px;#}
{#            height: 18px;#}
{#            margin-top: -9px;#}
{#            margin-left: -20px;#}
{#            text-align: right;#}
{#        }#}
{##}
{#    </style>#}
{#</head>#}
{#<body>#}
{##}
{#<div id="wrapper">#}
{#    <div class="timebox yuebox" id="yueBox"></div>#}
{#    <div class="timebox riqiBox" id="riqiBox"></div>#}
{#    <div class="timebox hourbox" id="hourbox"></div>#}
{#    <div class="timebox minutebox" id="minutebox"></div>#}
{#    <div class="timebox secondbox" id="secondbox"></div>#}
{#</div>#}
{##}
{##}
{#<script>#}
{##}
{#    let wrapper = document.getElementById("wrapper");#}
{#    let yueBox = document.getElementById("yueBox");#}
{#    let riqiBox = document.getElementById("riqiBox");#}
{#    let hourbox = document.getElementById("hourbox");#}
{#    let minutebox = document.getElementById("minutebox");#}
{#    let secondbox = document.getElementById("secondbox");#}
{##}
{#    /*#}
{#    * 找所有的东西标签函数#}
{#    * */#}
{#    let findSiblings = function( tag ){#}
{#        let parent = tag.parentNode;#}
{#        let childs = parent.children;#}
{#        let sb = [];#}
{#        for(let i=0 ; i <= childs.length-1 ; i++){#}
{#            if( childs[i]!==tag){#}
{#                sb[sb.length] = childs[i];#}
{#            }#}
{#        }#}
{#        return  sb ;#}
{#    };#}
{##}
{#    /*#}
{#    * 去掉所有兄弟的类#}
{#    * */#}
{#    let removeSiblingClass =function( tag ){#}
{#        let sb = findSiblings( tag );#}
{#        for(let i=0 ;  i <= sb.length-1 ; i++){#}
{#            sb[i].className = "";#}
{#        }#}
{#    };#}
{##}
{#    /*#}
{#    * 初始化月份函数#}
{#    * */#}
{#    let initMonth = function(){#}
{#      for(let i=1; i<=12; i++){#}
{#            let span = document.createElement("span");#}
{#            span.innerHTML = i+"月";#}
{#            yueBox.appendChild( span );#}
{#      }#}
{#    };#}
{##}
{#    // 初始化日期#}
{#    let initDate = function(){#}
{#        for(let i=1; i<=31; i++){#}
{#            let span = document.createElement("span");#}
{#            span.innerHTML = i+"日";#}
{#            riqiBox.appendChild( span );#}
{#        }#}
{#    };#}
{##}
{#    // 初始化小时，分钟，秒#}
{#    let initHour = function(){#}
{#        for(let i=0; i<=23; i++){#}
{#            let h = i ;#}
{#            let span = document.createElement("span");#}
{#            if( h<10){#}
{#                h="0"+h;#}
{#            }#}
{#            span.innerHTML = h +"点";#}
{#            hourbox.appendChild( span );#}
{#        }#}
{#    };#}
{#    let initMinute = function(){#}
{#        for(let i=0; i<=59; i++){#}
{#            let  f = i ;#}
{#            let span = document.createElement("span");#}
{#            if( f<10){#}
{#                f="0"+f;#}
{#            }#}
{#            span.innerHTML = f +"分";#}
{#            minutebox.appendChild( span );#}
{#        }#}
{#    };#}
{#    let initSecond = function(){#}
{#        for(let i=0; i<=59; i++){#}
{#            let  miao = i ;#}
{#            let span = document.createElement("span");#}
{#            if( miao<10){#}
{#                miao="0"+miao;#}
{#            }#}
{#            span.innerHTML = miao +"秒";#}
{#            secondbox.appendChild( span );#}
{#        }#}
{#    };#}
{##}
{#    // 时间文字样式切换函数#}
{#    let changeTime = function(tag){#}
{#        tag.className = "on";#}
{#        removeSiblingClass( tag );#}
{#    };#}
{##}
{#    /*#}
{#    * 初始化日历函数#}
{#    * */#}
{#    let initRili = function(){#}
{#        initMonth(); // 初始化月份#}
{#        initDate(); // 初始化日期#}
{#        initHour(); // 小时#}
{#        initMinute();#}
{#        initSecond();#}
{#    };#}
{##}
{#    /*#}
{#    * 展示当前时间#}
{#    * 参数：mydate 时间对象#}
{#    * */#}
{#    let  showNow = function( mydate ){#}
{##}
{#        let yue = mydate.getMonth() ;#}
{#        let riqi = mydate.getDate();#}
{#        let hour = mydate.getHours()  ;#}
{#        let minute = mydate.getMinutes();#}
{#        let second = mydate.getSeconds();#}
{#        // 时间文字样式切换函数#}
{#        changeTime( yueBox.children[yue] );#}
{#        changeTime( riqiBox.children[riqi-1] );#}
{#        changeTime( hourbox.children[hour] );#}
{#        changeTime( minutebox.children[minute] );#}
{#        changeTime( secondbox.children[second] );#}
{##}
{#    };#}
{##}
{#    // 展示时间圆圈函数#}
{#    // tag：目标#}
{#    // num：数字数量#}
{#    // dis：圆圈半径#}
{#    let textRound = function(tag,num,dis){#}
{#        let span = tag.children ;#}
{#        for(let i=0 ; i<=span.length-1; i++){#}
{#            span[i].style.transform="rotate("+ (360/span.length)*i+"deg)  translateX("+dis+"px)" ;#}
{#        }#}
{#    };#}
{#    /*#}
{#    * 旋转指定“圆圈”指定度数#}
{#    * */#}
{#    let rotateTag = function(tag , deg){#}
{#        tag.style.transform = "rotate("+deg+"deg)";#}
{#    };#}
{##}
{#    let main = function(){#}
{#        initRili(); // 初始化日历#}
{##}
{#        setInterval(function(){#}
{#            let mydate = new Date();#}
{#            showNow( mydate ); // 展示当前时间#}
{#        },1000);#}
{##}
{#        //  n秒后，摆出圆形#}
{#        setTimeout(function(){#}
{#            wrapper.className = "wrapper";#}
{#            textRound(yueBox,12,40);#}
{#            textRound(riqiBox,31,80);#}
{#            textRound(hourbox,24,120);#}
{#            textRound(minutebox,60,160);#}
{#            textRound(secondbox,60,200);#}
{#            setInterval(function(){#}
{#                let mydate = new Date();#}
{#                rotateTag( yueBox , -30*mydate.getMonth());#}
{#                rotateTag( riqiBox , -360/31*(mydate.getDate()-1) );#}
{#                rotateTag( hourbox , -360/24*mydate.getHours());#}
{#                rotateTag( minutebox , -6*mydate.getMinutes());#}
{#                rotateTag( secondbox , -6*mydate.getSeconds());#}
{#            },1000)#}
{#        },1000)#}
{##}
{#    };#}
{#    main();#}
{##}
{#</script>#}
{##}
{#</body>#}
{#</html>#}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.3/jquery.js"></script>


    <style>
   * {
	padding:0;
	margin:0;
}
body {
	background:black;
	overflow:scroll;
	overflow-x:hidden;
	overflow-y:hidden;
}
#box {
	width:1000px;
	height:1000px;
	border-radius:50%;
	margin:0px auto;
	position:relative;
	top:100px;
	color:#dedede;
}
.second {
	width:10px;
	height:50px;
	position:absolute;
}
#box2 {
	width:800px;
	height:800px;
	border-radius:50%;
	margin:0px auto;
	position:relative;
	top:-800px;
	color:white;
}
#box3 {
	width:600px;
	height:600px;
	border-radius:50%;
	margin:0px auto;
	position:relative;
	top:-1500px;
	transform:scale(1.2);
	color:white;
}
#box4 {
	width:400px;
	height:400px;
	border-radius:50%;
	margin:0px auto;
	position:relative;
	top:-2000px;
	color:white;
}
#box5 {
	width:280px;
	height:280px;
	border-radius:50%;
	margin:0px auto;
	position:relative;
	top:-2340px;
	color:white;
}
#box6 {
	width:160px;
	height:160px;
	border-radius:50%;
	margin:0px auto;
	position:relative;
	top:-2560px;
	color:white;
}

    </style>

</head>
<body>


<div id="box"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>

<script>
    var box = document.getElementById("box");
 var box2 = document.getElementById("box2");
 var box3 = document.getElementById("box3");
 var box4 = document.getElementById("box4");
 var box5 = document.getElementById("box5");
 var box6 = document.getElementById("box6");
 for (var i = 0; i < 60; i++) {
     var node = document.createElement("div");
     node.style.left = 500 * Math.sin(Math.PI / 180 * 6 * i) + 500 - 5 + "px";
     node.style.top = 500 - 500 * Math.cos(Math.PI / 180 * 6 * i) - 25 + "px";
     node.style.transform = "rotate(" + 6 * i + "deg)";
     node.className = "second";
     node.innerHTML = i + 1 + "秒";
     box.appendChild(node);
 }
 for (var i = 0; i < 60; i++) {
     var node = document.createElement("div");
     node.style.left = 400 * Math.sin(Math.PI / 180 * 6 * i) + 400 - 5 + "px";
     node.style.top = 400 - 400 * Math.cos(Math.PI / 180 * 6 * i) - 25 + "px";
     node.style.transform = "rotate(" + 6 * i + "deg)";
     node.className = "second";
     node.innerHTML = i + 1 + "分";
     box2.appendChild(node);
 }
 for (var i = 0; i < 24; i++) {
     var node = document.createElement("div");
     node.style.left = 300 * Math.sin(Math.PI / 180 * 15 * i) + 300 - 5 + "px";
     node.style.top = 300 - 300 * Math.cos(Math.PI / 180 * 15 * i) - 25 + "px";
     node.style.transform = "rotate(" + 15 * i + "deg)";
     node.className = "second";
     node.innerHTML = i + "点";
     box3.appendChild(node);
 }
 for (var i = 0; i < 7; i++) {
     var node = document.createElement("div");
     node.style.left = 200 * Math.sin(Math.PI / 180 * (360 / 7) * i) + 200 - 5 + "px";
     node.style.top = 200 - 200 * Math.cos(Math.PI / 180 * (360 / 7) * i) - 25 + "px";
     node.style.transform = "rotate(" + (360 / 7) * i + "deg)";
     node.className = "second";
     node.innerHTML = "星期" + (i + 1) + "";
     box4.appendChild(node);
 }
 for (var i = 0; i < 30; i++) {
     var node = document.createElement("div");
     node.style.left = 140 * Math.sin(Math.PI / 180 * (360 / 30) * i) + 140 - 5 + "px";
     node.style.top = 140 - 140 * Math.cos(Math.PI / 180 * (360 / 30) * i) - 25 + "px";
     node.style.transform = "rotate(" + (360 / 30) * i + "deg)";
     node.className = "second";
     node.innerHTML = "" + (i + 1) + "号";
     box5.appendChild(node);
 }
 for (var i = 0; i < 12; i++) {
     var node = document.createElement("div");
     node.style.left = 80 * Math.sin(Math.PI / 180 * (360 / 12) * i) + 80 - 5 + "px";
     node.style.top = 80 - 80 * Math.cos(Math.PI / 180 * (360 / 12) * i) - 25 + "px";
     node.style.transform = "rotate(" + (360 / 12) * i + "deg)";
     node.className = "second";
     node.innerHTML = "" + (i + 1) + "月";
     box6.appendChild(node);
 }

 var deg = 0;
 var deg2 = 0;
 var deg3 = 0;
 var deg4 = 0;
 var deg5 = 0;
 var deg6 = 0;

 var interval = setInterval(xz, 16.7);

 function xz() {
     $("#box").children().css({
         color: "white"
     })
     $("#box2").children().css({
         color: "white"
     })
     $("#box3").children().css({
         color: "white"
     })
     $("#box4").children().css({
         color: "white"
     })
     $("#box5").children().css({
         color: "white"
     })
     $("#box6").children().css({
         color: "white"
     })
     deg += -6 / (1000 / 16.7);
     $("#box").css({
         transform: "rotate(" + deg + "deg)"
     })
     var data = new Date();
     $("#box").children().eq(data.getSeconds()).css({
         color: "red"
     })
     deg2 += -6 / (6000 / 16.7);
     $("#box2").css({
         transform: "rotate(" + deg2 + "deg)"
     })
     $("#box2").children().eq(data.getMinutes()).css({
         color: "red"
     })
     deg3 += -(360 / 24) / ((6000 * 24) / 16.7);
     $("#box3").css({
         transform: "rotate(" + deg3 + "deg)"
     })
     $("#box3").children().eq(data.getHours()).css({
         color: "red"
     })
     deg4 += -(360 / 7) / ((6000 * 24 * 7) / 16.7);
     $("#box4").css({
         transform: "rotate(" + deg4 + "deg)"
     })
     $("#box4").children().eq(data.getDay() - 1).css({
         color: "red"
     })
     deg5 += -(360 / 30) / ((6000 * 24 * 30) / 16.7);
     $("#box5").css({
         transform: "rotate(" + deg5 + "deg)"
     })
     $("#box5").children().eq(data.getDate() - 1).css({
         color: "red"
     })
     deg6 += -(360 / 12) / ((6000 * 24 * 365) / 16.7);
     $("#box6").css({
         transform: "rotate(" + deg6 + "deg)"
     })
     $("#box6").children().eq(data.getMonth()).css({
         color: "red"
     })

 }
</script>
</body>